<template>
  <div class="shop_code">
    <div class="warn-box">
      <svg-icon
        style="margin-right: 17px"
        icon-class="warn"
        :size="20"
      />
      <p class="color-666"><span
          class="font-16"
          style="line-height:35px"
        >店铺二维码说明</span><br />1. 商家生成下载店铺二维码进行推广宣传，通过扫描二维码下单的手续费率为1.5-8%区间。</p>
    </div>
    <div class="flex align-center">
      <div style="width: 350px;display: flex;">
        <el-image
            style="width:170px; height:170px;margin-right: 15px"
            :src="codeUrl?codeUrl:''"
        >
          <div
              slot="error"
              class="image-slot"
          >
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
        <el-image v-if="wxCodeUrl!=''"
            style="width:150px;"
            :src="wxCodeUrl?wxCodeUrl:''"
        >
          <div
              slot="error"
              class="image-slot"
          >
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
      <!-- <el-button
        style="margin-left:45px"
        type="primary"
        @click="download"
      >下载店铺二维码</el-button> -->

      <div style="padding-left: 500px">
        <p>


        <div class="img_wrap">
          <img
              v-if="qrCode"
              :src="$globalObj.imgBaseUrl+qrCode"
              style="height: 250px;width: 250px;"
          >
          <el-image-viewer
              v-if="showFront"
              :on-close="closeFront"
              :url-list="[$globalObj.imgBaseUrl+qrCode]"
          />
        </div>
        <p class="text-center img_footer">
<!--          <el-button-->
<!--              size="mini"-->
<!--              type="primary"-->
<!--              @click="qrCode&&(showFront=true)"-->
<!--          >查看大图</el-button>-->
          <el-upload
              action="string"
              style="display:inline-block;margin-left:10px"
              :show-file-list="false"
              :http-request="uploadSectionFile"
              :before-upload="beforeUpload"
          >
            <el-button
                size="mini"
                type="primary"
            >上传店铺客服二维码</el-button>
          </el-upload>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { shopQrcode,shopWxCode} from "@/api/shop";
// import { upload } from "@/api/index";
import { upload } from "../../../api";
import axios from "axios";
import {memberCode} from "../../../api/shop";
import { createh5Link } from '../generate'
import logoUrl from '@/assets/images/logo.png'
import ttlogoUrl from '@/assets/images/ttlogo.png'
export default {
  data() {
    return {
      codeUrl: '',
      qrCode:'',
      wxCodeUrl:'',
      showFront:false,
// 放大图片的路径
      dialogImageUrl: "",
// 上传图片放大弹出框
      dialogVisible: false,
      wxCode:'',
      memberID:''
    }
  },
  methods: {
    download() {
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'Anonymous')
      image.onload = function () {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        a.download = '店铺二维码'
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      };
      image.crossOrigin = '' // 切记一定要将这个放在src赋值前,要不然会在safari上报安全错误
      image.src = this.codeUrl;
    },
    // handlePreview(file) {
    //   // console.log(file);
    //   // 放大图片的路径
    //   this.dialogImageUrl = file.url;
    //   // 上传图片放大弹出框显示
    //   this.dialogVisible = true;
    //
    //  // console.log("1111")
    // },
    // 上传前对文件的大小进行判断
    beforeUpload(file) {
      this.fileInfo = file
      let isFileSize = true
      const hasAccept = true
      let isSize = true
      if (this.fileSize) {
        const size = parseInt(this.fileSize.slice(0, -1))
        if (this.fileSize.indexOf('K') > -1) {
          isFileSize = file.size / 1024 < size
        }
        if (this.fileSize.indexOf('M') > -1) {
          isFileSize = file.size / 1024 / 1024 < size
        }
        if (!isFileSize) {
          this.$message({
            message: '上传文件大小不能超过' + this.fileSize,
            type: 'error'
          })
          return false
        }
      }
      if (this.accept) {
        const fileExt = file.name.substring(file.name.lastIndexOf('.'))
        const list = this.accept.split(',')
        const hasAccept = !!list.find(item => item === fileExt)
        // console.log(hasAccept);
        if (!hasAccept) {
          this.$message({
            message: '上传文件类型必须为' + this.accept,
            type: 'error'
          })
          return false
        }
      }
      if (this.alwaysCrop) {
        this.option.img = URL.createObjectURL(file)
        this.dialogVisible = true
        return false
      }
      if (this.imgWidth || this.imgHeight || this.minWidth || this.minHeight || this.isSquare) {
        isSize = this.sizeCheck(file)
      }
      return isFileSize && hasAccept && isSize
    },
    RemovePreview(file){
      this.dialogImageUrl = '';
    },
    uploadSectionFile(params){

      const fd = new FormData();
      fd.append('file',params.file)
      // console.log(fd)
      upload(fd).then(res=>{
        if (res){
          // console.log(res.image);
          this.wxCode = res.image;
          this.$message.success("上传成功!")

          // let  data = {};
          // data.member_id = this.memberID;
          // data.qrcode = this.wxCode;
          // console.log("0000",this.memberID);
          shopWxCode({member_id:this.memberID,qrcode:this.wxCode}).then(res =>{

            // console.log(res)
            this.qrCode = res.qr_code;
            // window.location.reload();

            // if (res.length!=0){
            //   // console.log(res);
            //   this.qrCode = res.qr_code
            // }

          })
        }
      });

      // setTimeout(800);

    },
    closeFront(){
    this.showFront = false;
    },
    getData() {
      shopQrcode().then(res => {
        this.wxCodeUrl = res.mp_link
        // this.codeUrl = res.data.qr_code_url;
        createh5Link(res.h5_link,res.h5_title,res.logoUrl,(qr_code_url)=>{
          this.codeUrl = qr_code_url;
        })
        this.memberID = res.member_id;
        memberCode({member_id:res.member_id}).then(res=>{
          this.qrCode = res.qr_code
        })

      })
    }
  },
  mounted() {
    this.getData();


  }
}
</script>
<style lang="scss" scoped>
.shop_code {
  padding: 20px 30px;
  background-color: #f5f5f5;
}
</style>
